<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-06 00:34:26
 * @LastEditTime: 2019-12-14 15:51:20
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/echarts.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .van-cell__title {
            max-width: none;
        }

        .content {
            background: #fff !important;
        }

        .mask {
            background: transparent;
        }

        .left-page {
            background: #fff;
            border-right: 4px solid #ff9699;
            width: 200px;
            height: 100%;
            position: absolute;
            z-index: 99999999;
            left: -196px;
            top: 0;
            transition: all .4s;
            padding-right: 1px;
        }

        .left-page-show {
            left: 0;
            border-color: #fff;
        }

        .arrow {
            right: -28px;
            top: 50%;
            margin-top: -26px;
            position: absolute;
            width: 24px;
        }

        .arrow img {
            width: 12px;
        }

        .row {
            padding: 0 15px;
            margin-top: 10px;
            background: #fff;
        }

        .row .label {
            height: 40px;
            line-height: 40px;
            color: #3a3a3a;
            font-size: 15px;
            font-weight: 500;
        }

        .row .label span {
            vertical-align: middle;
        }

        .row .label .tag {
            display: inline-block;
            width: 4px;
            height: 14px;
            background: #cd1b21;
            margin-right: 6px;
        }

        .row .button {
            text-align: center;
            color: #3a3a3a;
        }

        .row .button .van-col {
            margin-bottom: 15px;
        }

        .img img {
            height: 34px;
        }

        .img-text {
            font-size: 13px;
            margin-top: 4px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="常用功能设置" left-arrow @click-left="onClickLeft"></van-nav-bar-main>
            <div class="content">
                <van-collapse v-model="collapseActiveName" accordion>
                    <van-collapse-item :title="row.TreeName" :name="row.TreeName"
                        v-for="(row,index1) in moduleList">
                        <van-checkbox-group v-model="row.checkArray">
                            <van-cell v-for="(item, index2) in row.node" clickable
                                :title="item.APFunName" @click="toggleCheckbox(index1,index2)" v-if="item.FunType || item.AP_Link">
                                <van-checkbox :name="item.APPFunID" :ref="'checkboxes' + index1" slot="right-icon" />
                            </van-cell>
                        </van-checkbox-group>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="bottom">
                <div class="left-content"></div>
                <div class="right-button">
                    <van-button color="#28529e" round  block @click="submitForm">完成</van-button>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready =  function () {

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                showLeftPage: false,
                collapseActiveName: '',
                moduleList: []
            },
            created: function () {
                var that = this;
                that.getModuleList();
            },
            methods: {
                getModuleList() {
                    var that = this;
                    APP.ajax('AP_GetUserNM', {}, function (res) {
                        var moduleList = [];
                        var usedList = JSON.parse(window.localStorage.getItem('usedList')) || [];
                        for (var i in res.ds) {
                            var x = 0;
                            for (var j in moduleList) {
                                if (res.ds[i].TreeName == moduleList[j].TreeName) {
                                    x = 1;
                                    moduleList[j].node.push(res.ds[i])
                                }
                            }
                            if (x == 0) {
                                moduleList.push({
                                    TreeName: res.ds[i].TreeName,
                                    checkArray:[],
                                    node: [res.ds[i]]
                                })
                            }
                        }

                        for(var i in moduleList){
                            var checkArray = [];
                            for(var j in moduleList[i].node){
                                if(usedList.indexOf(moduleList[i].node[j].APPFunID) > -1){
                                    checkArray.push(moduleList[i].node[j].APPFunID)
                                }
                            }
                            moduleList[i].checkArray = checkArray;
                        }

                        that.moduleList = moduleList;
                    })
                },
                toggleCheckbox(index1, index2) {
                    var that = this;
                    that.$refs['checkboxes' + index1][index2].toggle();
                },
                submitForm() {
                    var that = this;
                    
                    var newArray = [];
                    for(var i in that.moduleList){
                        newArray = newArray.concat(that.moduleList[i].checkArray);
                    }
                    api.sendEvent({
                        name: 'setCommonFunctions',
                        extra: {
                            moduleArray: newArray
                        }
                    });
                    api.closeWin();
                },
                onClickLeft() {
                    api.closeWin();

                }
            }
        })
    };
</script>

</html>